<template>
    <div :id="id" :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
    import * as echarts from 'echarts'
    // import resize from './mixins/resize'

    export default {
        // mixins: [resize],

        name: 'barCharts',

        props: {
            className: {
                type: String,
                default: 'chart',
            },
            id: {
                type: String,
                default: 'chart',
            },
            XData: {
                type: Array,
                // required: true
            },
            YData: {
                type: Array,
                // required: true
            },
            width: {
                type: String,
                default: '200px',
            },
            height: {
                type: String,
                default: '200px',
            },
            yAxisName: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                chart: null,
                rotate: 0,
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.chart = echarts.init(document.getElementById(this.id))
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        watch: {
            /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
            XData: {
                deep: true,
                handler() {
                    this.initChart()
                },
            },
            YData: {
                deep: true,
                handler() {
                    this.initChart()
                },
            },
        },

        methods: {
            initChart() {
                let maxData1 = this.calMax(this.YData)

                if (this.XData.length > 7) {
                    this.rotate = 30
                }
                // 绘制图表
                let option = {
                    // backgroundColor: '#344b58',
                    title: {
                        // text: 'statistics',
                        x: '20',
                        top: '20',
                        textStyle: {
                            color: '#fff',
                            fontSize: '22',
                        },
                        subtextStyle: {
                            color: '#fff',
                            fontSize: '16',
                        },
                    },
                    transform: {
                        type: 'sort',
                    },

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            textStyle: {
                                color: '#fff',
                            },
                        },
                    },
                    grid: {
                        left: '20%',
                        right: '22%',
                        borderWidth: 0,
                        top: '3%',
                        bottom: '5%',
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    legend: {
                        x: '5%',
                        top: '10%',
                        textStyle: {
                            color: '#90979c',
                        },
                        data: ['能耗'],
                    },
                    xAxis: [
                        //x轴数据设置
                        {
                            show: true,
                            type: 'value',
                            name: this.yAxisName,
                            // min: 0,
                            max: maxData1,
                            splitNumber: 6, //设置坐标轴的分割段数

                            axisLabel: {
                                formatter: '{value} ',
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                //这是x轴文字颜色
                                // lineStyle: {
                                //   color: '#90979c',
                                // },
                            },
                        },
                    ],
                    yAxis: [
                        {
                            show: true, //   前提：  y轴肯定是要显示的
                            name: '', //  你的单位写在这就可以
                            nameLocation: 'start', // y轴name处于y轴的什么位置
                            inverse: true, //是否反向坐标轴
                            type: 'category',
                            offset: 0,
                            axisLine: {
                                //这是y轴文字颜色
                                // lineStyle: {
                                //   color: '#90979c'
                                // }
                            },
                            data: this.XData,
                            axisPointer: {
                                type: 'shadow',
                            },
                            axisTick: {
                                show: false,
                            },

                            axisLabel: {
                                interval: 0, //代表显示所有y轴标签显示
                                rotate: 0,
                                formatter: function (params) {
                                    var provideNumber = 4 // 每行显示的字数
                                    if (params && params.toString().length > provideNumber) {
                                        var strToArr = params.toString().split('')
                                        for (
                                            var i = provideNumber;
                                            i <= params.toString().length;
                                            i += provideNumber + 1
                                        ) {
                                            strToArr.splice(i, 0, '\n')
                                        }
                                        return strToArr.join('')
                                    }
                                    return params
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            //自动排序
                            realtimeSort: true,
                            smooth: true,
                            valueAnimation: true,
                            data: this.YData,
                            type: 'bar',
                            barWidth: 22,
                            label: {
                                normal: {
                                    // show: true,
                                    // position: "right",
                                },
                            },

                            itemStyle: {
                                //通常情况下：
                                normal: {
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    // color: '#02bd6e',
                                    color: function (params) {
                                        if (params.dataIndex < 3) {
                                            return {
                                                type: 'linear',
                                                x: 1,
                                                y: 0,
                                                x2: 0,
                                                y2: 0,
                                                colorStops: [
                                                    { offset: 0, color: '#F99D35' }, // 设置颜色渐变
                                                    { offset: 1, color: '#FCCE99' },
                                                ],
                                            }
                                        } else {
                                            return {
                                                type: 'linear',
                                                x: 1,
                                                y: 0,
                                                x2: 0,
                                                y2: 0,
                                                colorStops: [
                                                    { offset: 0, color: '#009169' }, // 设置颜色渐变
                                                    { offset: 1, color: '#7FC8B4' },
                                                ],
                                            }
                                        }
                                    },
                                },
                            },
                        },
                    ],
                    //动画部分

                    animationDuration: 0,
                    animationDurationUpdate: 1000,
                    animationEasing: 'linear',
                    animationEasingUpdate: 'linear',
                }
                this.chart.setOption(option)
            },
            // 获取最大值方法
            calMax(arr) {
                var max = Math.max.apply(null, arr) // 获取最大值方法
                var maxint = Math.ceil(max / 5) // 向上以5的倍数取整
                var maxval = maxint * 5 + 5 // 最终设置的最大值
                return maxval // 输出最大值
            },
            // 获取最小值方法
            calMin(arr) {
                var min = Math.min.apply(null, arr) // 获取最小值方法
                var minint = Math.floor(min / 1) // 向下以1的倍数取整
                var minval = minint * 1 - 5 // 最终设置的最小值
                return minval // 输出最小值
            },
        },
    }
</script>

<style lang="less" scoped></style>
